/* * @index.vue * @description : 查看专业名词库 * @author lxj * @update (lxj 2023/12/4) */

<template>
  <div>
    <h1 class="title" style="text-align: center">专有名词库</h1>
    <!--    动态显示类别-->
    <div class="flex-container">
      <el-card v-for="(item, index) in domain" :key="index" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ index }}</span>
          <el-button style="float: right; padding: 3px; color: #7e9cff" @click="addMy(index)"
            >添加至我的词库</el-button
          >
        </div>
        <el-button v-for="word in item" :key="word.name" type="text">{{ word.name }}</el-button>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import axios from 'axios';
  import { ElMessage } from 'element-plus';

  // 按照domain分组后的数据集合
  const domain = ref(null);

  onMounted(() => {
    axios({
      method: 'get',
      url: 'http://127.0.0.1:4523/m1/3571383-0-default/api/properwords/public/all',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
    })
      .then((res) => {
        console.log('请求成功');
        console.log(res);
        let json = res.data.proper_words;
        let a = res.data.proper_words.map((obj) => obj.domain);
        // 根据domain类型进行重新分组
        let grouped = json.reduce((result, currentValue) => {
          (result[currentValue.domain] = result[currentValue.domain] || []).push(currentValue);
          return result;
        }, {});
        domain.value = grouped;
        console.log(domain.value);
        // let b = grouped.map((obj) => obj.name);
        // console.log(grouped[1]["name"]);
      })
      .catch((error) => {
        console.log('请求失败');
        console.log('error');
      });
  });

  const submitSuccess = () => {
    ElMessage({
      message: '添加成功',
      type: 'success',
    });
  };

  const submitFailed = () => {
    ElMessage({
      message: '添加失败',
      type: 'error',
    });
  };
  // 添加到我的词库
  const addMy = (index) => {
    let propers = JSON.stringify(index);
    console.log(propers);
    // 专有词列表
    let obj = [];
    // 请求传的参数
    let params = {};
    for (let i = 0; i < domain.value[index].length; i++) {
      let word = domain.value[index][0].name;
      obj.push(word);
    }
    // 打印post的名词列表
    console.log(obj);
    params['user_id'] = '1111';
    params['proper_words'] = obj;
    // post的json数据
    console.log(params);
    axios({
      method: 'post',
      url: '',
      data: params,
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
    })
      .then((res) => {
        console.log('请求成功');
        console.log(res);
        submitSuccess();
      })
      .catch((error) => {
        console.log('请求失败');
        console.log('error');
        submitFailed();
      });
  };
</script>

<style scoped lang="scss">
  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }

  .box-card {
    flex: 1 0 auto;
    margin: 10px;
    padding: 20px;
    border: 1px solid black;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
</style>
